<template>
  <div class="common-form-modal-component">
    <a-modal
      :open="open"
      :title="$t('notification.send')"
      :confirm-loading="loading"
      :ok-text="$t('common.submit')"
      :cancel-text="$t('common.cancel')"
      @ok="handleSubmit"
      @cancel="updateOpen(false)"
      width="700px"
    >
      <a-form
        ref="formRef"
        :model="form"
        :rules="formRules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item name="title" :label="$t('notification.title')">
          <a-input
            v-model:value="form.title"
            :placeholder="$t('notification.titlePlaceholder')"
          />
        </a-form-item>
        <a-form-item name="type" :label="$t('notification.type')">
          <a-radio-group v-model:value="form.type">
            <a-radio :value="NotificationType.SYSTEM">{{ $t('notification.typeSystem') }}</a-radio>
            <a-radio :value="NotificationType.TASK">{{ $t('notification.typeTask') }}</a-radio>
            <a-radio :value="NotificationType.MESSAGE">{{ $t('notification.typeMessage') }}</a-radio>
            <a-radio :value="NotificationType.TODO">{{ $t('notification.typeTodo') }}</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item name="level" :label="$t('notification.level')">
          <a-radio-group v-model:value="form.level">
            <a-radio :value="NotificationLevel.NORMAL">{{ $t('notification.levelNormal') }}</a-radio>
            <a-radio :value="NotificationLevel.IMPORTANT">{{ $t('notification.levelImportant') }}</a-radio>
            <a-radio :value="NotificationLevel.URGENT">{{ $t('notification.levelUrgent') }}</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item name="targetUserId" :label="$t('notification.receiver')">
          <a-select
            v-model:value="form.targetUserId"
            :placeholder="$t('notification.receiverPlaceholder')"
            allow-clear
          >
            <a-select-option value="1">管理员</a-select-option>
            <a-select-option value="2">测试用户</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="content" :label="$t('notification.content')">
          <a-textarea
            v-model:value="form.content"
            :placeholder="$t('notification.contentPlaceholder')"
            :rows="4"
          />
        </a-form-item>
        <a-form-item name="link" :label="$t('notification.link')">
          <a-input
            v-model:value="form.link"
            :placeholder="$t('notification.linkPlaceholder')"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import { NotificationType, NotificationLevel } from '@/types/api/notification'
import type { CreateNotification } from '@/types/api/notification'
import { useNotificationFormRules } from '../config/formRules'

defineOptions({
  name: 'NotificationFormModal'
})

// Props定义
const props = withDefaults(defineProps<{
  open: boolean
  form: Partial<CreateNotification>
  loading?: boolean
}>(), {
  loading: false
})

// Emits定义
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'submit'): void
}>()

// 表单实例
const formRef = ref<FormInstance>()

// 更新open状态
const updateOpen = (value: boolean) => {
  emit('update:open', value)
}

// 获取表单验证规则
const formRules = useNotificationFormRules()

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    emit('submit')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 监听弹窗关闭
watch(() => props.open, (val) => {
  if (!val) {
    formRef.value?.resetFields()
  }
})

// 导出表单实例
defineExpose({
  formRef
})
</script>

<style lang="scss" scoped>
</style> 